<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Qt 4.3: scale.js Example File (script/context2d/scripts/scale.js)</title>
  <link href="classic.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="top" width="32"><a href="http://www.trolltech.com/products/qt"><img src="images/qt-logo.png" align="left" width="32" height="32" border="0" /></a></td>
<td width="1">&nbsp;&nbsp;</td><td class="postheader" valign="center"><a href="index.html"><font color="#004faf">Home</font></a>&nbsp;&middot; <a href="classes.html"><font color="#004faf">All&nbsp;Classes</font></a>&nbsp;&middot; <a href="mainclasses.html"><font color="#004faf">Main&nbsp;Classes</font></a>&nbsp;&middot; <a href="groups.html"><font color="#004faf">Grouped&nbsp;Classes</font></a>&nbsp;&middot; <a href="modules.html"><font color="#004faf">Modules</font></a>&nbsp;&middot; <a href="functions.html"><font color="#004faf">Functions</font></a></td>
<td align="right" valign="top" width="230"><a href="http://www.trolltech.com"><img src="images/trolltech-logo.png" align="right" width="203" height="32" border="0" /></a></td></tr></table><h1 align="center">scale.js Example File<br /><sup><sup>script/context2d/scripts/scale.js</sup></sup></h1>
<pre> var ctx = document.getElementById('tutorial').getContext('2d');
   ctx.strokeStyle = &quot;#fc0&quot;;
   ctx.lineWidth = 1.5;
   ctx.fillRect(0,0,300,300);

   // Uniform scaling
   ctx.save()
   ctx.translate(50,50);
   drawSpirograph(ctx,22,6,5);  // no scaling

   ctx.translate(100,0);
   ctx.scale(0.75,0.75);
   drawSpirograph(ctx,22,6,5);

   ctx.translate(133.333,0);
   ctx.scale(0.75,0.75);
   drawSpirograph(ctx,22,6,5);
   ctx.restore();

   // Non uniform scaling (y direction)
   ctx.strokeStyle = &quot;#0cf&quot;;
   ctx.save()
   ctx.translate(50,150);
   ctx.scale(1,0.75);
   drawSpirograph(ctx,22,6,5);

   ctx.translate(100,0);
   ctx.scale(1,0.75);
   drawSpirograph(ctx,22,6,5);

   ctx.translate(100,0);
   ctx.scale(1,0.75);
   drawSpirograph(ctx,22,6,5);
   ctx.restore();

   // Non uniform scaling (x direction)
   ctx.strokeStyle = &quot;#cf0&quot;;
   ctx.save()
   ctx.translate(50,250);
   ctx.scale(0.75,1);
   drawSpirograph(ctx,22,6,5);

   ctx.translate(133.333,0);
   ctx.scale(0.75,1);
   drawSpirograph(ctx,22,6,5);

   ctx.translate(177.777,0);
   ctx.scale(0.75,1);
   drawSpirograph(ctx,22,6,5);
   ctx.restore();
 function drawSpirograph(ctx,R,r,O){
   var x1 = R-O;
   var y1 = 0;
   var i  = 1;
   ctx.beginPath();
   ctx.moveTo(x1,y1);
   do {
     if (i&gt;20000) break;
     var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
     var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
     ctx.lineTo(x2,y2);
     x1 = x2;
     y1 = y2;
     i++;
   } while (x2 != R-O &amp;&amp; y2 != 0 );
   ctx.stroke();
 }</pre>
<p /><address><hr /><div align="center">
<table width="100%" cellspacing="0" border="0"><tr class="address">
<td width="30%">Copyright &copy; 2008 <a href="trolltech.html">Trolltech</a></td>
<td width="40%" align="center"><a href="trademarks.html">Trademarks</a></td>
<td width="30%" align="right"><div align="right">Qt 4.3.5</div></td>
</tr></table></div></address></body>
</html>
